<template>
  <view class="step-status">
    <view class="steps">
      <view v-for="(data, index) in origData" :key="data.text" class="line-item">
        <view class="row-line row-line--before" :style="{height: index === 0 ? '0px' : '1px'}"></view>
        <img :src="data.img" class="img">
        <view class="row-line row-line--after" :style="{height: index === origData.length - 1 ? '0px' : '1px'}"></view>
      </view>
    </view>
    <view class="text">
      <view v-for="data in origData" :key="data.text" style="flex:1">
        {{data.text}}
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  status: {
    type: Number, // 1,2,3,4
    default: 0
  },
  type: {
    type: Number,
    default: 0
  }
})
const origData = computed(() => {
  const data = [
    { text: '提交申请', img: 'https://img.qumoyugo.com/webimgbg/pet-icon-sure-circle-fill-y.png' },
    { text: '平台审核', img: 'https://img.qumoyugo.com/webimgbg/pet-icon-plate-circle-fill-g.png' },
    // { text: '等待转账', img: 'https://img.qumoyugo.com/webimgbg/pet-icon-time-circle-fill-g.png' },
    { text: '到账成功', img: 'https://img.qumoyugo.com/webimgbg/pet-icon-sure-circle-fill-g.png' }
  ]
  // 1，待审批 2，待转账 3，已拒绝 4，已完成
  switch (props.status) {
    case 1:
      data[1].img = 'https://img.qumoyugo.com/webimgbg/pet-icon-refresh-circle-fill.png'
      break
    case 2:
      data[1].img = 'https://img.qumoyugo.com/webimgbg/pet-icon-sure-circle-fill-y.png'
      data[2].img = 'https://img.qumoyugo.com/webimgbg/pet-icon-refresh-circle-fill.png'
      break
    case 3:
      data[1].img = 'https://img.qumoyugo.com/webimgbg/pet-icon-erro-circle-fill.png'
      break
    case 4:
      data[1].img = 'https://img.qumoyugo.com/webimgbg/pet-icon-sure-circle-fill-y.png'
      data[2].img = 'https://img.qumoyugo.com/webimgbg/pet-icon-sure-circle-fill-y.png'
      // data[3].img = 'https://img.qumoyugo.com/webimgbg/pet-icon-sure-circle-fill-y.png'
      break
  }
  return data
})
</script>

<style scoped lang="scss">
.step-status{
  margin-top: 40rpx;
  display: flex;
  flex-direction: column;
  .img{
    width: 38rpx;
    height: 38rpx;
    margin: 0 20rpx;
  }
  .text{
    display: flex;
    align-items: flex-end;
    color: #999999;
    justify-content: space-between;
    flex-direction: row;
    text-align: center;
    margin-top: 16rpx;
  }
  .steps{
    display: flex;
    flex-direction: row;
    .line-item{
      display: inline-flex;
      flex-direction: row;
      flex: 1;
      align-items: center;
      justify-content: center;
      height: 38rpx;
      line-height: 38rpx;
    }
    .row-line{
      flex: 1;
      height: 1px;
      background-color: #D8D8D8;
    }
    .row-line--after {
      transform: translateX(1px);
    }
    .row-line--before {
      transform: translateX(-1px);
    }
  }
}
</style>
